<script>
import * as THREE from 'three';
// import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

export default {
  data() {
    return { scene: null, camera: null, renderer: null };
  },
  mounted() {
    this.initThree();
    this.loadModel('sorceress.glb');
  },
  methods: {
    initThree() {
      this.scene = new THREE.Scene();
      this.camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.container.appendChild(this.renderer.domElement);
    },
    loadModel(modelPath) {
      const loader = new GLTFLoader();
      // loader.load(
      //   modelPath,
      //   (gltf) => {
      //     debugger;
      //     this.scene.add(gltf.scene);
      //     this.renderer.render(this.scene, this.camera);
      //   },
      //   undefined,
      //   (error) => {
      //     console.error(error);
      //   }
      // );
      let that = this;
      loader.load(
        // 模型在 /public/static/building/文件夹下
        'shiba/scene.gltf',
        (gltf) => {
          console.log(gltf);

          // 将模型加入到场景中 ! important
          that.scene.add(gltf.scene);
          that.renderer.render(that.scene, that.camera);
        },
        undefined,

        (error) => {
          // 模型加载出错的回调函数
          console.log('error while loading', error);
        }
      );
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.renderer.render(this.scene, this.camera);
    },
  },
};
</script>

<template>
  <div id="three" ref="container"></div>
</template>

<style scoped>
#three {
  width: 500px;
  height: 500px;
  background-color: bisque;
}
</style>
